<template>
	<view class="findpu" style="margin-left: 30rpx; margin-right: 30rpx;">
		<view class="surtitle">姓氏库</view>
		<view class="surinfo">了解你姓氏的故事、起源、分布、家族、目前已有1066个姓氏。</view>
		<scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="width: 100%; "   @scrolltolower="upper"   :style="{height: WinHeight +'px'}"  >		
			<view v-for="(item,index) in list" :key="index" hover-class="none" class="zupus_item flex ali-c jus-b" @click="jump(item.id)">			
				<!-- <view class="zupus_item_back" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20240109/dc09d640fce8274d80.png)'}"></view> -->
				<image class="zupus_item_back" :src="photo_cdn1+'zpupload/20240109/dc09d640fce8274d80.png'" mode="aspectFill"></image>
				<view class="flex">
					<view class="itemimgss" :style="{backgroundImage:'url('+photo_cdn1+'zpupload/20240103/bf7ced5ee7a0e15045.png)'}">
						<view class="family_name">{{item.title || ''}}</view>
					</view>
					<view class="family_num">
						<view class="family_number">{{item.family_num || 0}}</view>
						<view class="family_numtxt">家族</view>
					</view>			
					<view class="divide"></view>
					<view class="area_num">
						<view class="family_number">{{item.area_num || 0}}</view>
						<view class="family_numtxt">省份</view>
					</view>
				</view>
				<view class="arrow">></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getxingshi} from "@/utils/api/zupu.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	export default{
		props: {
			idtype: {
				type:String,
				default(){
					return;
				}
			},
		},
		data(){
			return{
				photo_cdn1,
				current_page: 2,
				list: [],
				last_page: 55,
				per_page: 20,
				total: 1100,
				
				WinHeight:500,
			}
		},
		created() {
			
		},
		onLoad(option){
			this.WinHeight = uni.getWindowInfo().windowHeight - 80 ;
		},
		onShow() {
		},
		watch:{
			idtype: { 
				handler(value) {
					if(value == 'nav4'){
						this.getCardList()
						this.WinHeight = uni.getWindowInfo().windowHeight - 80 ;
					}
				}
			}
		},
		methods:{
			upper: function(e) {
				console.log(e)
				this.current_page++;
				this.getCardList(this.current_page);
			},
			getCardList(e){
				getxingshi(e).then(res=>{
					console.log(res.data)
					this.current_page = res.data.current_page;
					// this.list = res.data.data;
					for(var i=0; i< res.data.data.length; i++){
						this.list.push(res.data.data[i]);
					}
					this.last_page = res.data.last_page;
					this.per_page = res.data.per_page;
					this.total = res.data.total;
				})
			},
			//跳转
			jump(e){
				uni.navigateTo({
					url: '/pages/zupu/card/card?id='+e
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "./xsk.scss"
</style>